<template>
    <h2>用户详细信息注册</h2>

    <table class="table table-bordered">
        <tr>
            <td>真实姓名</td>
            <td>
                <input type="text" v-model="info.U_Name" />
            </td>
        </tr>
        <tr>
            <td>身份证号</td>
            <td>
                <input type="text" v-model="info.U_IdCard" @change="GetBirthday" />
            </td>
        </tr>
        <tr>
            <td>用户类型</td>
            <td>
                <select v-model="info.UT_Id">
                    <option value="0">--请选择--</option>
                    <option v-for="item in UTinfo" :value="item.UT_Id">{{ item.UT_Name }}</option>

                </select>
            </td>
        </tr>
        <tr>
            <td>联系方式</td>
            <td>
                <input type="text" v-model="info.U_Phone" />
            </td>
        </tr>
        <tr>
            <td>出生日期</td>
            <td>
                <input type="date" v-model="info.U_Birthday" />
            </td>
        </tr>
        <tr>
            <td>性别</td>
            <td>
                <input type="radio" name="sex" value="false" v-model="info.U_Sex" checked />男
                <input type="radio" name="sex" value="true" v-model="info.U_Sex" />女
            </td>
        </tr>
        <tr>
            <td>年收入</td>
            <td>
                <input type="text" v-model="info.U_Income" />
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="button" value="注册" @click="SaveData" />
                <input type="button" value="返回" />
            </td>
        </tr>
    </table>
</template>

<script setup lang="ts">
import 'bootstrap/dist/css/bootstrap.min.css'

import { useRoute } from 'vue-router'
import { onMounted, ref } from 'vue';
import axios from 'axios';

//路由
const route = useRoute();
//响应式数据
const UTinfo = ref([
    {
        UT_Id: 0,
        UT_Name: ""
    }
])
//
const info = ref({
    U_Id: "",
    U_Name: "",
    U_IdCard: "",
    UT_Id: 0,
    U_Phone: "",
    U_Birthday: "",
    U_Sex: false,
    U_Income: "",

})



//生命周期
onMounted(() => {
    showUserType();
})
//完成加载用户类型
const showUserType = () => {
    axios.get("https://localhost:44387/api/Users/ShowUserType").then((res) => {

        console.log(res.data);
        UTinfo.value = res.data;


    })

}
//保存数据
const SaveData = () => {
    if (info.value.U_Name == "") {
        alert("姓名不能为空");
        return
    }
    if (info.value.U_IdCard == "") {
        alert("身份证号不能为空");
        return
    }
    if (info.value.U_Phone == "") {
        alert("联系方式不能为空");
        return
    }



    var IdReg = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
    if (!IdReg.test(info.value.U_IdCard)) {
        alert("身份证号格式错误");
        return
    }

    var PhoneReg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
    if (!PhoneReg.test(info.value.U_Phone)) {
        alert("手机号格式错误");
        return
    }

    var IncomeReg = /^[0-9]*$/;
    if (!IncomeReg.test(info.value.U_Income)) {
        alert("年收入格式错误");
        return
    }
    //判断年收入必须大于0且小于1亿元
    if (Number(info.value.U_Income) <= 0 || Number(info.value.U_Income) >= 10000000) {
        alert("年收入必须大于0且小于1亿元");
        return
    }
    axios.post("https://localhost:44387/api/Users/AddUserRegister",{
        
        U_Id:route.query.Uid,
        U_Name:info.value.U_Name,
        U_IdCard:info.value.U_IdCard,
        UT_Id:info.value.UT_Id,
        U_Phone:info.value.U_Phone,
        U_Birthday:info.value.U_Birthday,
        U_Sex:info.value.U_Sex,
        U_Income:info.value.U_Income,
    })
    .then(res=>{
        if (res.data>0) {
            alert("注册成功");
            
        }
        else {
            alert("注册失败");
        }
    })
}
//获取出生日期
const GetBirthday = () => {
    var birthday = info.value.U_IdCard.substring(6, 14);

    //获取年
    var year = birthday.substring(0, 4);
    //获取月
    var month = birthday.substring(4, 6);
    //获取日
    var day = birthday.substring(6, 8);
    info.value.U_Birthday = year + "-" + month + "-" + day;
}

</script>